<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .timeline-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .timeline-line {
            width: 2px;
            background: #e5e7eb;
        }
        .timeline-active {
            background: #10b981;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <button onclick="goBack()" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </button>
                <h1 class="text-lg font-semibold">订单详情</h1>
                <button onclick="shareOrder()" class="text-white hover:opacity-80">
                    <i class="fas fa-share text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-120px)] overflow-y-auto pb-4">
            <!-- Order Status -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center">
                            <span id="status-badge" class="bg-orange-100 text-orange-600 text-sm px-3 py-1.5 rounded-full font-medium">待发货</span>
                        </div>
                        <span id="order-time" class="text-sm text-gray-500">2025-01-05 10:32</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-600">订单号: <span id="order-number" class="text-gray-800 font-medium">202501050001</span></span>
                        <button onclick="copyOrderNumber()" class="text-indigo-600 text-sm">复制</button>
                    </div>
                </div>
            </div>

            <!-- Order Timeline -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-4">订单进度</h3>
                    <div class="relative" id="timeline">
                        <!-- Timeline items will be inserted here -->
                    </div>
                </div>
            </div>

            <!-- Product Information -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-3">商品信息</h3>
                    <div id="product-list">
                        <!-- Products will be inserted here -->
                    </div>
                </div>
            </div>

            <!-- Price Breakdown -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-3">价格明细</h3>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">商品总价</span>
                            <span id="subtotal">¥598.00</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">运费</span>
                            <span id="shipping-fee">¥0.00</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">优惠券</span>
                            <span id="discount" class="text-red-500">-¥0.00</span>
                        </div>
                        <div class="border-t border-gray-200 pt-2 flex justify-between font-medium">
                            <span>实付金额</span>
                            <span id="total-amount" class="text-red-600 text-lg">¥598.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Information -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-3">买家信息</h3>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">买家姓名</span>
                            <span id="customer-name">张先生</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">联系电话</span>
                            <span id="customer-phone">138****1234</span>
                        </div>
                        <div class="flex justify-between items-start">
                            <span class="text-gray-600">收货地址</span>
                            <span id="customer-address" class="text-right max-w-[200px]">北京市朝阳区建国门外大街1号国贸大厦A座2501室</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">下单时间</span>
                            <span id="order-date">2025-01-05 10:32:15</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">支付方式</span>
                            <span id="payment-method">微信支付</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Logistics Information -->
            <div id="logistics-info" class="bg-white border-b border-gray-200" style="display: none;">
                <div class="px-4 py-4">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="font-medium">物流信息</h3>
                        <button onclick="trackLogistics()" class="text-indigo-600 text-sm">查看详情</button>
                    </div>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">快递公司</span>
                            <span id="logistics-company">顺丰速运</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">运单号</span>
                            <div class="flex items-center">
                                <span id="tracking-number">SF1234567890</span>
                                <button onclick="copyTrackingNumber()" class="ml-2 text-indigo-600 text-xs">复制</button>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">发货时间</span>
                            <span id="ship-time">2025-01-05 16:30:00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Remarks -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-3">备注信息</h3>
                    <div class="space-y-2 text-sm">
                        <div>
                            <span class="text-gray-600">买家留言:</span>
                            <p id="customer-message" class="text-gray-800 mt-1">请尽快发货，谢谢！</p>
                        </div>
                        <div>
                            <span class="text-gray-600">商家备注:</span>
                            <p id="merchant-message" class="text-gray-800 mt-1">VIP客户，优先发货处理</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div id="action-buttons" class="flex gap-3">
                <!-- Buttons will be dynamically inserted based on order status -->
            </div>
        </div>

    </div>

    <script>
        // Get order ID from URL parameters
        function getOrderId() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('id') || '202501050001';
        }

        // Mock order data
        const orderData = {
            '202501050001': {
                orderNumber: '202501050001',
                status: 'pending',
                statusText: '待发货',
                statusClass: 'bg-orange-100 text-orange-600',
                orderTime: '2025-01-05 10:32',
                orderDate: '2025-01-05 10:32:15',
                customerName: '张先生',
                customerPhone: '138****1234',
                customerAddress: '北京市朝阳区建国门外大街1号国贸大厦A座2501室',
                paymentMethod: '微信支付',
                customerMessage: '请尽快发货，谢谢！',
                merchantMessage: 'VIP客户，优先发货处理',
                subtotal: 598.00,
                shippingFee: 0.00,
                discount: 0.00,
                totalAmount: 598.00,
                products: [{
                    name: '无线蓝牙耳机 Pro Max',
                    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop',
                    color: '黑色',
                    quantity: 2,
                    price: 299.00
                }],
                timeline: [
                    { status: 'ordered', text: '订单提交', time: '2025-01-05 10:32', active: true },
                    { status: 'paid', text: '付款成功', time: '2025-01-05 10:35', active: true },
                    { status: 'pending', text: '等待发货', time: '', active: false },
                    { status: 'shipped', text: '已发货', time: '', active: false },
                    { status: 'delivered', text: '已送达', time: '', active: false }
                ]
            },
            '202501050003': {
                orderNumber: '202501050003',
                status: 'unpaid',
                statusText: '待付款',
                statusClass: 'bg-red-100 text-red-600',
                orderTime: '2025-01-05 12:20',
                orderDate: '2025-01-05 12:20:30',
                customerName: '王先生',
                customerPhone: '139****5678',
                customerAddress: '上海市浦东新区陆家嘴金融贸易区世纪大道100号',
                paymentMethod: '支付宝',
                customerMessage: '麻烦包装仔细一点',
                merchantMessage: '注意包装要求',
                subtotal: 267.00,
                shippingFee: 0.00,
                discount: 0.00,
                totalAmount: 267.00,
                products: [{
                    name: '便携充电宝 20000mAh',
                    image: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=60&h=60&fit=crop',
                    color: '白色',
                    quantity: 3,
                    price: 89.00
                }],
                timeline: [
                    { status: 'ordered', text: '订单提交', time: '2025-01-05 12:20', active: true },
                    { status: 'unpaid', text: '等待付款', time: '', active: false },
                    { status: 'pending', text: '等待发货', time: '', active: false },
                    { status: 'shipped', text: '已发货', time: '', active: false },
                    { status: 'delivered', text: '已送达', time: '', active: false }
                ]
            },
            '202501050004': {
                orderNumber: '202501050004',
                status: 'shipped',
                statusText: '已发货',
                statusClass: 'bg-blue-100 text-blue-600',
                orderTime: '2025-01-04 15:30',
                orderDate: '2025-01-04 15:30:45',
                customerName: '赵女士',
                customerPhone: '136****9012',
                customerAddress: '广州市天河区珠江新城花城大道85号',
                paymentMethod: '微信支付',
                customerMessage: '工作日收货',
                merchantMessage: '已安排工作日配送',
                subtotal: 159.00,
                shippingFee: 0.00,
                discount: 0.00,
                totalAmount: 159.00,
                logisticsCompany: '顺丰速运',
                trackingNumber: 'SF1234567890',
                shipTime: '2025-01-05 16:30:00',
                products: [{
                    name: '无线键盘鼠标套装',
                    image: 'https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=60&h=60&fit=crop',
                    color: '黑色',
                    quantity: 1,
                    price: 159.00
                }],
                timeline: [
                    { status: 'ordered', text: '订单提交', time: '2025-01-04 15:30', active: true },
                    { status: 'paid', text: '付款成功', time: '2025-01-04 15:32', active: true },
                    { status: 'shipped', text: '已发货', time: '2025-01-05 16:30', active: true },
                    { status: 'intransit', text: '运输中', time: '2025-01-05 18:00', active: true },
                    { status: 'delivered', text: '已送达', time: '', active: false }
                ]
            },
            '202501040008': {
                orderNumber: '202501040008',
                status: 'service',
                statusText: '售后中',
                statusClass: 'bg-purple-100 text-purple-600',
                orderTime: '2025-01-04 09:15',
                orderDate: '2025-01-04 09:15:20',
                customerName: '刘先生',
                customerPhone: '135****3456',
                customerAddress: '深圳市南山区科技园深南大道9988号',
                paymentMethod: '微信支付',
                customerMessage: '商品有质量问题，申请退货',
                merchantMessage: '正在处理售后申请',
                subtotal: 299.00,
                shippingFee: 0.00,
                discount: 0.00,
                totalAmount: 299.00,
                products: [{
                    name: '蓝牙音箱运动版',
                    image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=60&h=60&fit=crop',
                    color: '蓝色',
                    quantity: 1,
                    price: 299.00
                }],
                timeline: [
                    { status: 'ordered', text: '订单提交', time: '2025-01-04 09:15', active: true },
                    { status: 'paid', text: '付款成功', time: '2025-01-04 09:18', active: true },
                    { status: 'shipped', text: '已发货', time: '2025-01-04 16:30', active: true },
                    { status: 'delivered', text: '已送达', time: '2025-01-05 10:00', active: true },
                    { status: 'service', text: '售后处理中', time: '2025-01-06 14:20', active: true }
                ]
            }
        };

        // Initialize page
        function initializePage() {
            const orderId = getOrderId();
            const order = orderData[orderId];
            
            if (!order) {
                alert('订单不存在');
                goBack();
                return;
            }

            // Update order basic info
            document.getElementById('status-badge').textContent = order.statusText;
            document.getElementById('status-badge').className = `${order.statusClass} text-sm px-3 py-1.5 rounded-full font-medium`;
            document.getElementById('order-time').textContent = order.orderTime;
            document.getElementById('order-number').textContent = order.orderNumber;

            // Update customer info
            document.getElementById('customer-name').textContent = order.customerName;
            document.getElementById('customer-phone').textContent = order.customerPhone;
            document.getElementById('customer-address').textContent = order.customerAddress;
            document.getElementById('order-date').textContent = order.orderDate;
            document.getElementById('payment-method').textContent = order.paymentMethod;
            document.getElementById('customer-message').textContent = order.customerMessage;
            document.getElementById('merchant-message').textContent = order.merchantMessage;

            // Update price info
            document.getElementById('subtotal').textContent = `¥${order.subtotal.toFixed(2)}`;
            document.getElementById('shipping-fee').textContent = `¥${order.shippingFee.toFixed(2)}`;
            document.getElementById('discount').textContent = `-¥${order.discount.toFixed(2)}`;
            document.getElementById('total-amount').textContent = `¥${order.totalAmount.toFixed(2)}`;

            // Update logistics info if available
            if (order.logisticsCompany) {
                document.getElementById('logistics-info').style.display = 'block';
                document.getElementById('logistics-company').textContent = order.logisticsCompany;
                document.getElementById('tracking-number').textContent = order.trackingNumber;
                document.getElementById('ship-time').textContent = order.shipTime;
            }

            // Render products
            renderProducts(order.products);
            
            // Render timeline
            renderTimeline(order.timeline);
            
            // Render action buttons
            renderActionButtons(order.status);
        }

        // Render product list
        function renderProducts(products) {
            const productList = document.getElementById('product-list');
            productList.innerHTML = '';

            products.forEach(product => {
                const productDiv = document.createElement('div');
                productDiv.className = 'flex items-start border-b border-gray-100 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0';
                productDiv.innerHTML = `
                    <img src="${product.image}" alt="商品" class="w-16 h-16 rounded-lg object-cover mr-3">
                    <div class="flex-1">
                        <h4 class="text-sm font-medium mb-1">${product.name}</h4>
                        <p class="text-xs text-gray-500 mb-1">颜色: ${product.color}</p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-red-600 font-medium">¥${product.price}</span>
                            <span class="text-sm text-gray-500">x${product.quantity}</span>
                        </div>
                    </div>
                `;
                productList.appendChild(productDiv);
            });
        }

        // Render timeline
        function renderTimeline(timeline) {
            const timelineContainer = document.getElementById('timeline');
            timelineContainer.innerHTML = '';

            timeline.forEach((item, index) => {
                const timelineDiv = document.createElement('div');
                timelineDiv.className = 'flex items-start';
                
                const isLast = index === timeline.length - 1;
                const dotClass = item.active ? 'timeline-dot timeline-active' : 'timeline-dot bg-gray-300';
                const lineClass = item.active ? 'timeline-line bg-green-500' : 'timeline-line';
                
                timelineDiv.innerHTML = `
                    <div class="flex flex-col items-center mr-3">
                        <div class="${dotClass}"></div>
                        ${!isLast ? `<div class="${lineClass} h-8 mt-1"></div>` : ''}
                    </div>
                    <div class="flex-1 ${!isLast ? 'pb-4' : ''}">
                        <p class="text-sm font-medium ${item.active ? 'text-gray-800' : 'text-gray-400'}">${item.text}</p>
                        ${item.time ? `<p class="text-xs text-gray-500 mt-1">${item.time}</p>` : ''}
                    </div>
                `;
                timelineContainer.appendChild(timelineDiv);
            });
        }

        // Render action buttons based on order status
        function renderActionButtons(status) {
            const actionButtons = document.getElementById('action-buttons');
            actionButtons.innerHTML = '';

            switch(status) {
                case 'unpaid':
                    actionButtons.innerHTML = `
                        <button onclick="remindPayment()" class="flex-1 bg-blue-500 text-white py-3 rounded-lg font-medium hover:bg-blue-600 transition-colors">
                            提醒付款
                        </button>
                        <button onclick="cancelOrder()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                            取消订单
                        </button>
                    `;
                    break;
                case 'pending':
                    actionButtons.innerHTML = `
                        <button onclick="shipOrder()" class="flex-1 bg-orange-500 text-white py-3 rounded-lg font-medium hover:bg-orange-600 transition-colors">
                            立即发货
                        </button>
                        <button onclick="contactCustomer()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                            联系买家
                        </button>
                    `;
                    break;
                case 'shipped':
                    actionButtons.innerHTML = `
                        <button onclick="trackLogistics()" class="flex-1 bg-blue-500 text-white py-3 rounded-lg font-medium hover:bg-blue-600 transition-colors">
                            查看物流
                        </button>
                        <button onclick="confirmDelivery()" class="flex-1 bg-green-500 text-white py-3 rounded-lg font-medium hover:bg-green-600 transition-colors">
                            确认收货
                        </button>
                    `;
                    break;
                case 'service':
                    actionButtons.innerHTML = `
                        <button onclick="handleService()" class="flex-1 bg-purple-500 text-white py-3 rounded-lg font-medium hover:bg-purple-600 transition-colors">
                            处理售后
                        </button>
                        <button onclick="contactCustomer()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                            联系买家
                        </button>
                    `;
                    break;
                default:
                    actionButtons.innerHTML = `
                        <button onclick="contactCustomer()" class="flex-1 bg-blue-100 text-blue-600 py-3 rounded-lg font-medium hover:bg-blue-200 transition-colors">
                            联系买家
                        </button>
                    `;
            }
        }

        // Action functions
        function goBack() {
            window.history.back();
        }

        function shareOrder() {
            const orderId = getOrderId();
            if (navigator.share) {
                navigator.share({
                    title: '订单详情',
                    text: `订单号: ${orderId}`,
                    url: window.location.href
                });
            } else {
                copyToClipboard(window.location.href);
                alert('订单链接已复制到剪贴板');
            }
        }

        function copyOrderNumber() {
            const orderNumber = document.getElementById('order-number').textContent;
            copyToClipboard(orderNumber);
            alert('订单号已复制');
        }

        function copyTrackingNumber() {
            const trackingNumber = document.getElementById('tracking-number').textContent;
            copyToClipboard(trackingNumber);
            alert('运单号已复制');
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).catch(() => {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
            });
        }

        function remindPayment() {
            if (confirm('确定要向买家发送付款提醒吗？')) {
                alert('付款提醒已发送！\n\n买家将收到短信和推送通知。');
            }
        }

        function cancelOrder() {
            if (confirm('确定要取消这个订单吗？\n\n取消后无法恢复。')) {
                alert('订单已取消');
                // Update UI or redirect
            }
        }

        function shipOrder() {
            if (confirm('确定要发货吗？\n\n发货后请及时填写物流信息。')) {
                alert('订单已标记为发货状态\n\n请填写物流信息以便买家跟踪。');
                // Update UI or redirect to logistics form
            }
        }

        function contactCustomer() {
            const customerPhone = document.getElementById('customer-phone').textContent;
            if (confirm(`确定要联系买家吗？\n\n电话: ${customerPhone}`)) {
                // In a real app, this would open phone app or messaging
                alert('正在为您连接买家...');
            }
        }

        function trackLogistics() {
            const trackingNumber = document.getElementById('tracking-number').textContent;
            alert(`查看物流详情\n\n运单号: ${trackingNumber}\n\n将跳转到物流跟踪页面...`);
            // In a real app, redirect to logistics tracking page
        }

        function confirmDelivery() {
            if (confirm('确认买家已收货？\n\n确认后订单将标记为已完成。')) {
                alert('订单已确认收货\n\n交易完成，感谢您的服务！');
                // Update order status
            }
        }

        function handleService() {
            if (confirm('确定要处理这个售后申请吗？')) {
                alert('售后处理页面\n\n将跳转到详细的售后处理界面...');
                // In a real app, redirect to service handling page
            }
        }

        // Initialize page when DOM is loaded
        document.addEventListener('DOMContentLoaded', initializePage);
    </script>
</body>
</html>